<template>
  <el-dialog
    title="供应商库存"
    destroy-on-close
    append-to-body
    :visible.sync="show"
    width="750px"
    :before-close="cancel">
    <p style="font-size: 16px">{{ title }}</p>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">
        <!-- 关闭 -->
        {{ $t('关闭') }}
      </el-button>
    </div>
  </el-dialog>
</template>

<script>
import { getStockSource } from '@/api/distribution/sku/shopSkuPair'
export default {
  props: {
    /**
     * formData
     */
    formData: {
      type: Object,
      default: () => ({}),
    },

    /**
     * 控制显示隐藏
     */
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      title: '',
      detail: {},
    }
  },
  computed: {},
  watch: {
    show: function (newValue) {
      if (newValue) {
        this.getList()
      }
    },
  },
  methods: {
    getList() {
      getStockSource({ id: this.formData.id }).then((res) => {
        const { code, data, msg } = res
        if (code === 200) {
          const { reserveStock, cloudStock, sellerTotalStock, sellerUnOutStock, stock } = data
          this.detail = { ...data }
          this.title = `供应商库存(${stock}) = 预留库存(${reserveStock}) + 云库存(${cloudStock}) + 卖家持有总库存(${sellerTotalStock}) + 卖家未出货总库存(${sellerUnOutStock})`
        }
      })
    },
    handleSubmit() {
    },
    cancel() {
      this.$emit('update:show', false)
    },
  },
}
</script>
<style scoped lang="scss">
::v-deep .el-descriptions-item__cell {
  width: 50%;
}
</style>
